<template>
    <div>
        <a-form @keypress.enter="handleSearch">
            <flexbox align="flex-start">
                <flexbox class="cell-item">
                    <h-dic-select type="systemType" title="系统类型" v-model:value="form.systemType" />
                </flexbox>
                <flexbox class="cell-item">
                    <h-dic-select title="状态" :defaultOptions="statusOptions" v-model:value="form.status" />
                </flexbox>
                <a-input class="cell-item" allowClear placeholder="请输入系统名称关键字" v-model:value="searchKeyword" style="width: 300px" />
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button class="margin-l-8" @click="handleReset">重置</a-button>
            </flexbox>
        </a-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, unref, watch } from 'vue';
import { HDicSelect } from '@/components';
const statusOptions = [
    { code: '进行中', dimensionName: '进行中' },
    { code: '已结束', dimensionName: '已结束' }
];
export default defineComponent({
    components: {
        HDicSelect
    },
    setup(_, { emit }) {
        const form = ref<any>({
            systemType: null,
            status: null
        });
        const searchKeyword = ref<string>('');
        // 重置搜索条件
        const handleReset = () => {
            form.value = {
                systemType: null,
                status: null
            };
            searchKeyword.value = '';
        };
        const handleSearch = () => {
            emit('search', {
                ...unref(form),
                systemName: unref(searchKeyword)
            });
        };
        watch(
            form,
            () => {
                emit('search', unref(form));
            },
            { deep: true }
        );
        return {
            form,
            searchKeyword,
            handleReset,
            handleSearch,
            statusOptions
        };
    }
});
</script>
<style scoped lang="less">
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
</style>